<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Fixed Blockly</title>
  <script src="../../socket.io.slim.js"></script>
  <script src="../../acorn_interpreter.js"></script>
  <script src="../../blockly_compressed.js"></script>
  <script src="../../blocks_compressed.js"></script>
  <script src="../../javascript_compressed.js"></script>
  <script src="../../msg/js/en.js"></script>
  <style>
    body {
      background-color: #fff;
      font-family: sans-serif;
    }
    h1 {
      font-weight: normal;
      font-size: 140%;
    }
  </style>
  <script>
  Blockly.Blocks['say'] = {
    init: function() {
      this.appendDummyInput()
          .appendField("say")
          .appendField(new Blockly.FieldTextInput("hello"), "say_content");
      this.setPreviousStatement(true, null);
      this.setNextStatement(true, null);
      this.setColour(230);
  this.setTooltip("");
  this.setHelpUrl("");
    }
  };
  Blockly.JavaScript['say'] = function(block) {
  var text_say_content = block.getFieldValue('say_content');
  // TODO: Assemble JavaScript into code variable.
  var code = `say("${text_say_content}")\n`;
  return code;
};
    </script>
</head>
<body>
  <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
    <a href="../index.html">Demos</a> &gt; Fixed Blockly</h1>

  <p>This is a simple demo of injecting Blockly into a fixed-sized 'div' element.</p>

  <p>&rarr; More info on <a href="https://developers.google.com/blockly/guides/configure-blockly/web/fixed-size">injecting fixed-sized Blockly</a>&hellip;</p>

  <p>
    <button onclick="showCode()">Show JavaScript</button>
    <button onclick="runCode()">Run JavaScript</button>
  </p>

  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

  <xml id="toolbox" style="display: none">
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="controls_repeat_ext"></block>
    <block type="math_number"></block>
    <block type="math_arithmetic"></block>
    <block type="text"></block>
    <block type="text_print"></block>
    <block type="say"></block>
  </xml>

  <script>
    var demoWorkspace = Blockly.inject('blocklyDiv',
        { media: '../../media/',
          toolbox: document.getElementById('toolbox')}
        );



    function showCode() {
      // Generate JavaScript code and display it.
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
      Blockly.JavaScript.STATEMENT_PREFIX = 'highlightBlock(%1);\n';
      Blockly.JavaScript.addReservedWords('highlightBlock');
      var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
      console.log(code);
    }

    function highlightBlock(id) {
      demoWorkspace.highlightBlock(id);
      highlightPause = true;
    }


    var socket = io('ws://127.0.0.1:12358' + '/test', {transports: ['websocket']});

    function initApi(interpreter, scope) {

      var wrapper = function(text) {
        // return console.log(arguments.length ? text : '');
        return alert(arguments.length ? text : '');
      };
      interpreter.setProperty(scope, 'alert',
        interpreter.createNativeFunction(wrapper));

      var wrapper = function(text) {
        console.log(text.data);
        return socket.emit('actuator',
                         {id: 'microbit',
                          data: text.data,
                          topic: "actuators/say"});
      };
      
      interpreter.setProperty(scope, 'say',
        interpreter.createNativeFunction(wrapper));


      // Add an API function for highlighting blocks.
      var wrapper = function(id) {
        return demoWorkspace.highlightBlock(id);
      };
      interpreter.setProperty(scope, 'highlightBlock',
          interpreter.createNativeFunction(wrapper));
      }

    function runCode() {
      // Generate JavaScript code and run it.
      window.LoopTrap = 1000;
      Blockly.JavaScript.INFINITE_LOOP_TRAP =
          'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
      var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
      // todo : 使用interpreter运行代码
      /*
      try {
        eval(code);
      } catch (e) {
        alert(e);
      }*/
      highlightPause = false;
      myInterpreter = new Interpreter(code, initApi);
      runner = function() {
            if (myInterpreter) {
              var hasMore = myInterpreter.run();
              if (hasMore) {
                // Execution is currently blocked by some async call.
                // Try again later.
                setTimeout(runner, 10);
              } else {
                // Program is complete.
                //resetInterpreter();
                //resetStepUi(false);
              }
            }
          };
      runner();


    }
  </script>

</body>
</html>